<template>
	<view class="box">
		<view class="head">
			<u-icon name="map-fill" size="45" color="white"></u-icon>
			<u-icon name="bell" size="45" color="white"></u-icon>
		</view>
		<view class="search">
			<u-search placeholder="搜索项目" v-model="keyword" :show-action="false" bg-color="white" ></u-search>
		</view>
		<u-swiper :list="list" height="300" border-radius="none"></u-swiper>
		<view class="iconlist">
			<view class="iconpart" v-for="(item,index) in iconlist" :key="index">
				<image :src="item.icon"></image>
				<text style="padding-top:2% ;">{{item.name}}</text>
			</view>
		</view>
		<view class="other">
			<text style="font-size: 35rpx;">服务推荐</text>
			<text style="padding-top: 1%;">更多服务></text>
		</view>
		<text class="title">收藏的食谱</text>
		<view class="vediopart" v-for="(item,index) in vedioList" :key="index">
			<image :src="item.scr"></image>
			<view>
				<text class="vediotitle">{{item.name}}</text>
				<text class="time">{{item.time}}</text>
			</view>
		</view>
		<view style="width: 100%;height: 20rpx;"></view>
	</view>
</template>

<script>
	export default {
			data() {
				return {
					list: [{
							image: 'https://s1.ax1x.com/2023/03/21/ppUy0IO.png',
						},
						{
							image: 'https://s1.ax1x.com/2023/03/21/ppUyrJe.png',
						},
						{
							image: 'https://s1.ax1x.com/2023/03/21/ppUyWeP.png'
						}
					],
					iconlist:[{
						icon:'../../../static/icon/1.png',
						name:'健康报告'
					},
					{
						icon:'../../../static/icon/3.png',
						name:'兴趣课程'
					},
					{
						icon:'../../../static/icon/2.png',
						name:'老年交友'
					},
					{
						icon:'../../../static/icon/4.png',
						name:'养生知识'
					}],
					vedioList:[{
						scr:'https://tse3-mm.cn.bing.net/th/id/OIP-C.YyH5w3ZqmvaeZkUBy5B--AAAAA?w=190&h=271&c=7&r=0&o=5&dpr=1.5&pid=1.7',
						name:'破壁机养生食谱',
						time:'2022/05/30  10:10:10'
					},
					{
						scr:'https://tse1-mm.cn.bing.net/th/id/OIP-C.8-xpNDce84vy5mAuHOlU5QHaEz?w=196&h=127&c=7&r=0&o=5&dpr=1.5&pid=1.7',
						name:'100种煲汤方法',
						time:'2022/06/01  09:55:10'
					},
					{
						scr:'https://tse3-mm.cn.bing.net/th/id/OIP-C.eg0BAYf6c-yhUlAQckN9ZwAAAA?w=187&h=333&c=7&r=0&o=5&dpr=1.5&pid=1.7',
						name:'200种煲汤方法',
						time:'2022/03/31  11:10:08'
					}]
				}
			},
			methods: {
	
			}
		}
</script>

<style lang="scss" scoped>
	.box {
		width: 100%;
		height: 100%;
		background-color: white;
		.head {
			width: 100%;
			height: 6vh;
			display: flex;
			padding-left: 6%;
			padding-right: 6%;
			justify-content: space-between;
			background-color: #ff9900;
			position: sticky;
			top: 0;
			z-index: 1;
		}
		.search{
			width: 100%;
			height: 80rpx;
			background-color: #ff9900;
			position: sticky;
			top: 6vh;
			z-index: 1;
		}
		.iconlist{
			width: 90%;
			height: 150rpx;
			margin: auto;
			display: flex;
			justify-content: space-between;
			margin-top: 5%;
			.iconpart{
				display: flex;
				flex-direction: column;
				image{
					width: 100%;
					height: 100rpx;
					border-radius: 50%;
				}
			}
		}
		.other{
			width: 90%;
			height: 55rpx;
			margin: auto;
			display: flex;
			justify-content: space-between;
			margin-top: 2%;
		}
		.title{
			font-size: 35rpx;
			padding-left: 5%;
			padding-top: 1%;
		}
		.vediopart{
			width: 90%;
			height:250rpx;
			margin: auto;
			display: flex;
			margin-top: 2%;
			image{
				width: 45%;
				height: 100%;
			}
			view{
				display: flex;
				flex-direction: column;
				width: 55%;
				.vediotitle{
					font-size: 35rpx;
					padding-top: 25%;
					padding-left: 8%;
				}
				.time{
					font-size: 25rpx;
					padding-top: 2%;
					padding-left: 8%;
					color: gray;
				}
			}
		}
	}
</style>
<style lang="scss" scoped>
	::v-deep .u-search{
		width: 90%;
		padding-left: 10%;
	}
</style>